<template>
  <div class="user">
    <div class="chaxun">
      <el-form :inline="true" :model="formInline" ref="seachFrom">
        <el-form-item label="用户账号" prop="userAccout">
          <el-input v-model="formInline.userAccout"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="formInline.userName"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="chongzhi">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="allbutton">
      <el-button type="primary" @click="addmodel">新增</el-button>
      <el-button type="primary" @click="editmodel">修改</el-button>
      <el-button type="primary" @click="deldata">删除</el-button>
    </div>

    <div class="biaoge">
      <el-table
        ref="multipleTable"
        :data="tableData"
        stripe
        border
        tooltip-effect="dark"
        style="width: 100%"
        height="450"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="userAccout" label="用户账号" width="150" sortable></el-table-column>
        <el-table-column prop="userName" label="用户名" width="120" sortable></el-table-column>
        <el-table-column prop="userSex" label="用户性别" width="100">
          <template slot-scope="scope">
            <div>{{scope.row.userSex=='1'?'男' :scope.row.userSex=='0'?'女': 未知}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="180"></el-table-column>
        <el-table-column prop="email" label="邮箱地址" width="180"></el-table-column>
        <el-table-column prop="idCard" label="身份证号" width="180"></el-table-column>
        <el-table-column prop="score" label="积分金额" width="120"></el-table-column>
      </el-table>
    </div>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10,50,100, 200, 300, 400]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalnum"
      ></el-pagination>
    </div>
    <!-- 新增用户 -->
    <el-dialog
      title="新增用户"
      :visible.sync="dialogVisibleadd"
      :close-on-click-modal="false"
      :show-close="false"
      :modal-append-to-body="false"
    >
      <el-form :inline="true" :model="add" :rules="rules" ref="addruleForm">
        <el-form-item label="用户账号" prop="userAccout" label-width="100px">
          <el-input v-model="add.userAccout"></el-input>
        </el-form-item>
        <el-form-item label="用户姓名" prop="userName" label-width="100px">
          <el-input v-model="add.userName"></el-input>
        </el-form-item>
        <el-form-item label="用户性别" prop="userSex" label-width="100px">
          <el-select v-model="add.userSex">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
            <el-option label="未知" value="2"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="手机号" prop="phone" label-width="100px">
          <el-input v-model="add.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱地址" prop="email" label-width="100px">
          <el-input v-model="add.email"></el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="idCard" label-width="100px">
          <el-input v-model="add.idCard"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="passWord" label-width="100px">
          <el-input v-model="add.passWord" type="password"></el-input>
        </el-form-item>
        <el-form-item label="积分金额" prop="frontScore" label-width="100px">
          <el-input v-model="add.frontScore"></el-input>
        </el-form-item>        
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="sureadd">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改用户 -->
    <el-dialog
      title="修改用户"
      :visible.sync="dialogVisibleedit"
      :close-on-click-modal="false"
      :show-close="false"
      :modal-append-to-body="false"
    >
      <el-form :inline="true" :model="edit" :rules="rules" ref="editruleForm">
        <el-form-item label="用户账号" prop="userAccout" label-width="100px">
          <el-input v-model="edit.userAccout"></el-input>
        </el-form-item>
        <el-form-item label="用户姓名" prop="userName" label-width="100px">
          <el-input v-model="edit.userName"></el-input>
        </el-form-item>
        <el-form-item label="用户性别" prop="userSex" label-width="100px">
          <el-select v-model="edit.userSex">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
            <el-option label="未知" value="2"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="手机号" prop="phone" label-width="100px">
          <el-input v-model="edit.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱地址" prop="email" label-width="100px">
          <el-input v-model="edit.email"></el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="idCard" label-width="100px">
          <el-input v-model="edit.idCard"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="passWord" label-width="100px">
          <el-input v-model="edit.passWord" type="password"></el-input>
        </el-form-item>
        <el-form-item label="积分金额" prop="score" label-width="100px">
          <el-input v-model="edit.score"></el-input>
        </el-form-item>    
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="sureedit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        userAccout:"",
        userName:"",
        pagesize:"",
        pageNum:"",
        idAdmin:"1"
      },
      tableData:[],
      add: {
        userAccout:"",
        userName:"",
        userSex:"",
        phone:"",
        email:"",
        idCard:"",
        passWord:"",
        frontScore:"",
        idAdmin:"1"
      },
      edit: {},
      dialogVisibleedit: false,
      dialogVisibleadd: false,
      rules: {
        userAccout: [{ required: true, message: "请输入账号", trigger: "blur" }],
        userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        passWord: [{ required: true, message: "请输入密码", trigger: "blur" }],
        frontScore: [{ required: true, message: "请输入积分金额", trigger: "blur" }],
        score: [{ required: true, message: "请输入积分金额", trigger: "blur" }],
        userSex:[{ required: true, message: "请输入性别", trigger: "change" }]
      },
      totalnum: 0,
      pagesize: 10,
      currentPage: 1,
      hasChooseList: []
    };
  },
  beforeMount() {
    this.getData();
  },
  methods: {
    getData() {
      this.formInline.pagesize=this.pagesize
      this.formInline.pageNum=this.currentPage
      this.$axios.post(this.$store.state.url+'/customer/listCustomers',this.formInline).then(res => {
          if (res.data.code == 1) {
            this.tableData=res.data.data.list
            this.totalnum=res.data.data.total
          }else{
            this.$message({
              showClose: false,
              message: res.data.msg,
              type: 'error'
            });
          }
        })
    },
    //重置
    chongzhi(){
      this.$refs["seachFrom"].resetFields()
      this.pagesize= 10
      this.currentPage= 1
      this.getData()
    },
    //查询
    onSubmit() {
      this.getData()
    },
    //对话框取消
    quxiao() {
      this.dialogVisibleadd = false;
      this.dialogVisibleedit = false;
    },
    //点开新增对话框
    addmodel() {
      this.dialogVisibleadd = true;
      if (this.$refs["addruleForm"]) {
        this.$refs["addruleForm"].resetFields();
      }
    },
    //确认新增
    sureadd() {
      this.$refs["addruleForm"].validate(valid => {
        if (valid) {
          this.$axios.post(this.$store.state.url+'/customer/addCustomer',this.add).then(res => {
          if (res.data.code == 1) {
            this.getData();
            this.dialogVisibleadd = false;
          }else{
            this.$message({
              showClose: false,
              message: res.data.msg,
              type: 'error'
            });
          }
        })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //点开修改对话框
    editmodel() {
      if (1 == this.hasChooseList.length) {
        this.dialogVisibleedit = true;
        this.edit = JSON.parse(JSON.stringify(this.hasChooseList[0]))
        this.edit.userSex=this.edit.userSex+''
      } else {
        //提示不让修改
        this.$message.error("请选择一条数据进行修改");
      }
      if (this.$refs["editruleForm"]) {
        this.$refs["editruleForm"].resetFields();
      }
    },
    //确定修改
    sureedit() {
      this.$refs["editruleForm"].validate(valid => {
        if (valid) {
          this.$axios.post(this.$store.state.url+'/customer/updateCustomerById',this.edit).then(res => {
          if (res.data.code == 1) {
            this.getData();
            this.dialogVisibleedit = false;
          }else{
            this.$message({
              showClose: false,
              message: res.data.msg,
              type: 'error'
            });
          }
        })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //多选
    handleSelectionChange(val) {
      this.hasChooseList = val;
    },
    //删除
    deldata() {
      if (0 < this.hasChooseList.length) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
            this.$axios.get(this.$store.state.url+'/customer/deleteCustomer?id='+this.hasChooseList[0].id).then(res => {
          if (res.data.code == 1) {
            this.getData();
            this.$message({
              type: "success",
              message: "删除成功!"
            })
          }else{
            this.$message({
              showClose: false,
              message: res.data.msg,
              type: 'error'
            });
          }
        })       
         }).catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else {
        this.$message.error("请选择一条数据进行删除");
      }
    },
    handleSizeChange(val) {
      this.pagesize=val
      this.getData()
    },
    handleCurrentChange(val) {
      this.currentPage=val
      this.getData()
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.biaoge {
  margin-top: 30px;
}
.block {
  float: right !important;
}
</style>

<style>
.user .el-input__inner{
    width: 200px !important
}
.el-pagination .el-select .el-input .el-input__inner {
 padding-right: 25px;
 border-radius: 3px;
 width: 100px ! important;
}
.el-pagination__editor.el-input .el-input__inner {
  width: 40px !important;
}
</style>

